<template>
  <div>
    <section class="index-container">
      <div class="index-shopInfo">
        <!-- 左侧图片 -->
        <div class="log_container">
          <img :src="restaurant.image_path" alt />
        </div>
        <!-- 右侧内容 -->
        <!-- 品牌 -->
        <div class="index_shopname">
          <i v-if="restaurant.is_premium">品牌</i>
          <span>{{restaurant.name}}</span>
        </div>
        <!-- 星级 -->
        <div class="index-rateWrap">
          <Rating :rating="restaurant.rating" />
          <div>
            <span class="rate">{{restaurant.rating}}</span>
            <span>月售{{restaurant.recent_order_num}}单</span>
          </div>
          <div v-if="restaurant.delivery_mode" class="delivery">
            <span class="icon-hollow">{{restaurant.delivery_mode.text}}</span>
          </div>
        </div>
        <!-- 配送 -->
        <div class="index-moneylimit">
          <div>
            <span>￥{{restaurant.float_minimum_order_amount}}起送</span>
            <span>配送费￥{{restaurant.float_delivery_fee}}</span>
          </div>
          <div class="index-distanceWrap">
            <!-- toFixed（2）保留后面的两位 -->
            <span>{{(restaurant.distance / 1000).toFixed(2)}}km</span>
            <span>{{restaurant.order_lead_time}}分钟</span>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import Rating from "./rating.vue";
export default {
  name: "indexShop",
  components: {
    Rating,
  },
  props: {
    restaurant: Object,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.log_container img {
  width: 100px;
}
.delivery {
  padding-top: 20px;
  float: right;
}
</style>